<template>
  <div id="goods_goodsList">
    <!--顶部搜索框内容开始-->
    <div class="role_seek">
      <el-input
        class="role_input"
        placeholder="输入标题名称"
        v-model="forms.title"
        clearable
        @change="seek"
      ></el-input>
      <el-input
        class="role_input"
        placeholder="输入商品条形码"
        v-model="forms.barcode"
        clearable
        @change="seek"
      ></el-input>

      <el-select v-model="forms.status" clearable placeholder="选择商品状态">
        <el-option
          v-for="item in status"
          :key="item.staData"
          :label="item.staName"
          :value="item.staData"
        ></el-option>
      </el-select>
      <el-cascader
        clearable
        placeholder="请选择类目"
        :options="spulist"
        v-model="forms.categoryId"
        @change="categoryWay"
        :props="{ checkStrictly: true }"
      ></el-cascader>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="seek"
       v-power="'operation:goods:list'"
        >查找</el-button
      >
      <el-button size="mini" type="primary" icon="el-icon-edit" @click="add"
      v-power="'operation:goods:create'"
        >添加</el-button
      >
      <el-button
        type="danger"
        :disabled="disableds"
        icon="el-icon-delete"
        @click="batchCancel"
        v-power="'operation:goods:delete'"
        >批量删除</el-button
      >
    </div>
    <!--顶部搜索框内容结束-->

    <!--底部列表内容部分-->
    <template>
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="selections"
      >
        <el-table-column type="selection" align="center"> </el-table-column>
        <el-table-column label="sku信息" sortable align="center" type="expand">
          <template slot-scope="scope">
            <el-table
              border
              :data="scope.row.skuList"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column
                label="商品条码"
                align="center"
                prop="barCode"
              ></el-table-column>
              <el-table-column
                label="商品规格"
                align="center"
                prop="title"
              ></el-table-column>
              <el-table-column
                label="商品库存"
                align="center"
                prop="stock"
              ></el-table-column>
              <el-table-column
                label="商品冻结库存"
                align="center"
                prop="freezeStock"
              ></el-table-column>
              <el-table-column label="原价" align="center">
                <template slot-scope="scope">
                  {{ scope.row.originalPrice / 100 }}
                </template>
              </el-table-column>
              <el-table-column label="现价" align="center">
                <template slot-scope="scope">
                  {{ scope.row.price / 100 }}
                </template></el-table-column
              >
              <el-table-column label="VIP价格" align="center">
                <template slot-scope="scope">
                  {{ scope.row.vipPrice / 100 }}
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="商品ID"
          align="center"
        ></el-table-column>
        <el-table-column
          width="100px"
          label="名称"
          align="center"
          prop="title"
        ></el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column label="商品详情介绍" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="look(scope.row)"
            v-power="'operation:goods:detail'"
              >查看</el-button
            >
            <!--查看弹出框开始-->
            <el-dialog title="商品详情" :visible.sync="lookVisible" width="60%">
              <p v-html="detail" style="width:100%;"></p>
            </el-dialog>
            <!--弹出框结束-->
          </template>
        </el-table-column>
        <el-table-column
          label="类目ID"
          align="center"
          prop="categoryId"
        ></el-table-column>
        <el-table-column
          label="邮费模板ID"
          align="center"
          prop="freightTemplateId"
        ></el-table-column>
        <el-table-column
          label="销量"
          align="center"
          prop="sales"
        ></el-table-column>
        <el-table-column
          label="单位"
          align="center"
          prop="unit"
        ></el-table-column>
        <el-table-column label="是否在售" align="center">
          <template slot-scope="scope"
            ><el-tag :type="scope.row.status == 1 ? 'success' : 'info'">{{
              scope.row.status | statusFilter
            }}</el-tag></template
          >
        </el-table-column>
        <el-table-column label="描述" align="center" width="310px">
          <template slot-scope="scope">{{ scope.row.description }}</template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          align="center"
          width="250px"
        >
          <template slot-scope="scope">
            <el-button
              class="button_redact"
              size="mini"
              @click="handleEdit(scope.row)"
               v-power="'operation:goods:edit'"
              >编辑</el-button
            >
            <el-button
              size="mini"
               v-power="'operation:goods:delete'"
              :type="scope.row.status ? 'warning' : 'success'"
              @click="freeze(scope.row)"
              >{{ !scope.row.status | freezeFilter }}</el-button
            >
            <el-button
              class="button_remove"
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
               v-power="'operation:goods:delete'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--底部列表内容部分结束-->

    <!--底部分页开始-->
    <div class="block">
      <Paging :forms="forms" :gain="gain"></Paging>
    </div>
    <!--底部分页结束-->
  </div>
</template>

<script>
import GoodsList from "@/api/goods/GoodsList";
import Paging from "../../components/Paging.vue"; //自定义组件

export default {
  data() {
    return {
      //弹出框
      tableData: [], //table里面的数据
      lookVisible: false,//查看弹出框
      formLabelWidth: "120px", //弹出框宽度
      spulist: [], //spu数据接收数组
      disableds: true,
      detail: "", //查看的内容
      //分页
      forms: {
        limit: 20, //limit
        total: 0, //分页——-共几条ds
        pageNo: 1, //页码
        title: "", //搜索标题
        categoryId: "", //搜索分类
        status: "", //状态
        barcode: "" //条形码
      },
      //商品状态
      status: [
        { staData: 0, staName: "下架" },
        { staData: 1, staName: "正常" }
      ],
      //输入框数值
      form: {
        id: "", //商品id
        ids: []//商品id列表
      },
    };
  },
  components: {
    Paging
  },
  created() {
    this.gain();
    GoodsList.spu().then(res => {
      this.spulist = res.data.data;
      this.getTreeData(this.spulist);
    });
  },
  filters: {
    //是否在售
    statusFilter(data) {
      if (data == 1) {
        return "在售";
      } else if (data == 0) {
        return "未售";
      }
    },
    //冻结
    freezeFilter(data) {
      if (data == 1) {
        return "上架";
      } else {
        return "下架";
      }
    }
  },
  methods: {
    //查找类目
    categoryWay(e) {
      if (e == null || e === undefined) {
        return false;
      }
      const category = e[e.length - 1];
      this.forms.categoryId = category;
    },
    //查看
    look(row) {
      this.lookVisible = true; //显示弹出框
      GoodsList.look(row.id).then(res => {
        //查看接口
        this.detail = res.data.data.detail; //将内容赋值
      });
    },
    //当全选状态有变化就触发
    selections(selection) {
      this.form.ids = selection.map(item => item.id);
      if (this.form.ids.length >= 1) {
        this.disableds = false;
      } else {
        this.disableds = true;
      }
    },
    //获取列表数据内容
    gain() {
      var _this = this;
      GoodsList.gain(_this.forms).then(res => {
        _this.tableData = res.data.data.items; //将接口列表内容赋值给列表数组
        _this.forms.total = res.data.data.total; //分页————条数
        _this.forms.limit = res.data.data.pageSize; //页码长度
        _this.forms.pageNo = res.data.data.pageNo; //页码
      });
    },
    //点击添加按钮触发
    add() {
      this.$router.replace({//跳转路由
        path: "upsert"
      });
    },
    //点击编辑按钮触发
    handleEdit(row) {
      this.$router.replace({//跳转路由
        path: "upsert",
        query: { id: row.id }
      });
      this.form.id = row.id; //获取到本行id并赋值
    },

    //冻结
    freeze(row) {
      for (const key in this.form) {
        this.form[key] = row[key];
      }
      let rowstatus = row.status == 1 ? "下架" : "上架";
      this.$confirm(
        "此操作将" + rowstatus + "商品---" + row.title + "---, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          //确定冻结的话
          this.freezeport(row);
        })
        .catch(() => {
          return;
        });
    },
    //冻结接口
    freezeport(row) {
      GoodsList.freeze(this.form, row.status ? 0 : 1).then(res => {
        if (res.data.errmsg == "成功") {
          this.gain();
          let rowstatus = row.status == 1 ? "下架" : "上架";
          this.Prosperity.Messages(rowstatus + "成功", "success");
        } else {
          this.Prosperity.Messages(res.data.errmsg, "error");
        }
      });
    },
    //搜索信息
    seek() {
      this.gain();
    },
    //批量删除按钮
    batchCancel() {
      this.$confirm("此操作将永久删除选中的"+this.form.ids.length+"件商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //确定删除的话
          this.batchCancelPort();
        })
        .catch(() => {
          this.Prosperity.Messages("已取消删除");
        });
    },
    //批量删除接口
    batchCancelPort() {
      var _this = this;
      GoodsList.batchCancel(_this.form)
        .then(res => {
          if (res.data.errmsg == "成功") {
            //如果res返回的值为成功
            _this.gain(); //重新渲染
            this.Prosperity.Messages("删除成功", "success");
          } else {
            _this.Prosperity.Messages(res.data.errmsg, "error");
          }
        })
        .catch(err => {
          return err;
        });
    },
    //删除按钮
    handleDelete(row) {
      this.form.id = row.id; //当前删除的id
      this.$confirm(
        "此操作将永久删除该商品---" + row.title + "---, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          //确定删除的话
          this.cancel();
        })
        .catch(() => {
          this.Prosperity.Messages("已取消删除");
        });
    },
    //删除内容接口
    cancel() {
      var _this = this;
      GoodsList.cancel(_this.form)
        .then(res => {
          if (res.data.errmsg == "成功") {
            //如果res返回的值为成功
            _this.gain(); //重新渲染
            this.Prosperity.Messages("删除成功", "success");
          } else {
            _this.Prosperity.Messages(res.data.errmsg, "error");
          }
        })
        .catch(err => {
          return err;
        });
    },
    //递归
    getTreeData(data) {
    for (let item in data.length) {
        if (data[item].children.length < 1) {
          data[item].children = undefined;
        } else {
          this.getTreeData(data[item].children);
        }
      }
    }
  }
};
</script>

<style scoped="scoped">
/*最大父盒子开始*/
#goods_goodsList {
  padding: 20px;
}
/*最大父盒子结束*/

/*顶部index框开始*/
.role_seek > .el-input {
  width: 200px !important;
  height: 40px !important;
}
.role_seek > .el-input > .el-input__inner {
  font-size: inherit;
  width: 50% !important;
  height: 100% !important;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.role_input .el-input__suffix {
  left: 170px !important;
}
.el-input {
  margin-right: 5px;
}
.el-select {
  margin-right: 5px;
}
/*顶部index框结束*/

/*顶部按钮开始*/
.role_seek > .el-button--primary {
  line-height: 1px;
  font-size: 14px;
  border: 1px solid #409eff !important;
  background: #409eff !important;
  color: #fff;
  vertical-align: middle;
  padding: 12px 20px;
  margin-left: 5px;
}
/*顶部按钮结束*/

/*底部列表内容*/
.el-table {
  margin-top: 23px;
  font-size: 12px;
}
.cell {
  text-align: center;
  font-size: 12px;
  padding: 0px 10px;
}
.el-table__row > td {
  padding: 8px 0px;
}
.button_redact {
  background: #409eff !important;
  color: #fff !important;
  border: 1px solid #409eff;
}
/*编辑内容按钮*/
.button_redact:hover {
  background: #66b1ff !important;
  border: 1px solid #66b1ff;
}
.button_remove {
  background: #f56c6c !important;
  color: #fff !important;
  border: #f56c6c 1px solid;
}
.button_remove:hover {
  background: #f78989 !important;
  border: 1px solid #f78989;
}
.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}
img {
  width: 40px;
}
/*底部列表内容*/

/*底部分页*/
.block {
  margin: 55px 0px;
}

/*底部分页结束*/

/*添加弹出框*/
.el-form-item__label {
  text-align: left;
  margin-left: 50px;
  width: 85px !important;
}
.el-input__inner {
  text-indent: 5px;
}
.pop-up
  > .el-form-item
  > .el-form-item__content
  > .el-input
  > .el-input__inner {
  width: 268px !important;
  height: 38px;
  padding: 15px 0px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

.pop-up > .el-form-item > .el-form-item__content > .el-form-item__error {
  left: 0px !important;
}
/*添加弹出框结束*/
.el-select .el-input__inner {
  border: 1px solid #dcdfe6;
}
.el-select__caret {
  position: absolute;
  right: 58px !important;
}
.rolelds .el-input__suffix > i {
  position: absolute;
  right: 24px;
}
</style>
